<!--
 * @Description: 生产计划-火箭生产任务
 * @Autor: 曹敬涛
 * @Date: 2021-08-16 15:45:18
 * @LastEditors: 商晓彬
 * @LastEditTime: 2022-02-16 15:45:57
-->
<div class="ex-management">
    <div class="m-subheader">
        <div class="row align-items-center">
            <div class="mr-auto col-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>人员矩阵</span>
                </h3>
            </div>
        </div>
    </div>
    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">
                <!-- 查询框 -->
                <div class="p-formgroup-inline">
                    <span class="p-field">
                        <span class="text" style="margin-left: 15px;">班组：</span>
                        <p-dropdown name="team" [options]="teamList" [(ngModel)]="queryInfo.team" dataKey="id"
                            (onChange)="teamChangeEv($event.value)" [filter]="true" filterBy="displayName"
                            [optionLabel]="'displayName'" placeholder="请选择">
                        </p-dropdown>
                    </span>
                    <span class="p-field" style="margin-left: 20px;">
                        <span class="text">人员：</span>
                        <p-dropdown name="people" [options]="peopleList" [(ngModel)]="queryInfo.people" dataKey="id"
                            [filter]="true" filterBy="name" [optionLabel]="'name'" placeholder="请选择">
                        </p-dropdown>
                    </span>
                    <p-button label="查询" (click)="getDescList($event)" class="query-btn"></p-button>
                    <p-button type="button" label="重置" (click)="reset()" class="reset-btn" style="margin-left: 10px;">
                    </p-button>
                </div>
                <div style="margin-top: 30px;">
                    <p-button *ngIf="'Pages.PersonnelMatrix.newlyAdded' | permission" class="add-btn" (click)="addSkillMatrix()" label="新增人员"></p-button>
                </div>
                <!-- 列表 -->
                <div class="row align-items-center" style="margin-top: 25px;">
                    <div class="primeng-datatable-container">
                        <p-table #dataTable [value]="primengTableHelper.records"
                            rows="{{primengTableHelper.defaultRecordsCountPerPage}}" (onLazyLoad)="getDescList($event)"
                            [paginator]="false" [lazy]="true" [scrollable]="true"
                            [responsive]="primengTableHelper.isResponsive"
                            [resizableColumns]="primengTableHelper.resizableColumns">
                            <ng-template pTemplate="header">
                                <tr>
                                    <!-- <th style="width: 80px">
                <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
              </th> -->
                                    <th style="width: 150px">操作</th>
                                    <th style="width: 60px">序号</th>
                                    <th style="width: 210px">班组</th>
                                    <th style="width: 150px">人员</th>
                                    <th style="width: 150px">技能</th>
                                    <th style="width: 150px">是否启用</th>
                                </tr>
                            </ng-template>
                            <ng-template pTemplate="body" let-rowIndex="rowIndex" let-car>
                                <tr>

                                    <!-- <td style="width: 80px">
                <p-tableCheckbox [value]="car"></p-tableCheckbox>
              </td> -->
                                    <td style="width: 150px">
                                        <div class="btn-group dropdown" dropdown container="body">
                                            <button dropdownToggle class="dropdown-toggle btn btn-sm btn-primary">
                                                <i class="fa fa-cog"></i><span class="caret"></span> 操作
                                            </button>
                                            <ul class="dropdown-menu" *dropdownMenu>
                                                <li>
                                                    <a *ngIf="'Pages.PersonnelMatrix.Resume' | permission" href="javascript:;" (click)="llVisibleEv(car.id)">履历</a>
                                                </li>
                                                <li>
                                                    <a *ngIf="'Pages.PersonnelMatrix.Modify' | permission" href="javascript:;" (click)="editDetail(car)">编辑</a>
                                                </li>
                                                <li>
                                                    <a *ngIf="'Pages.PersonnelMatrix.Deactivate' | permission" href="javascript:;" (click)="seeDetail(car)">{{car.isUsed ==
                                                        0?'启用':'停用'}}</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </td>
                                    <td style="width: 60px">{{rowIndex+1}}</td>
                                    <td style="width: 210px">{{car.organizationUnit}}</td>
                                    <td style="width: 150px">{{car.user}}</td>
                                    <td style="width: 150px">{{car.skill}}</td>
                                    <td style="width: 150px">{{car.isUsed == 0?'停用':'启用'}}</td>
                                </tr>
                            </ng-template>
                        </p-table>
                        <div class="primeng-paging-container">
                            <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                                [totalRecords]="primengTableHelper.totalRecordsCount"
                                (onPageChange)="getDescList($event)"
                                [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                            </p-paginator>
                            <span class="total-records-count">
                                {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 新增 修改 查看 弹窗 -->
    <p-dialog [style]="{width: '80%', height: '70%',background:'#fff'}" [(header)]="dialogType" [(visible)]="addVisible"
        (onHide)="displayclose()" modal="modal" [responsive]="true">
        <form #bopForm="ngForm" novalidate autocomplete="off">
            <div *ngIf="dialogType=='新增'">
                <button pButton type="button" (click)="addEv()" label="添加员工"></button>
                <div style="margin:10px 0;display: flex;">
                    <label style="margin-top: 4px;">*班组：</label>
                    <p-dropdown name="team" #teamSelect="ngModel" [options]="teamList" [(ngModel)]="teamAdd"
                        dataKey="id" (onChange)="teamChangeEv($event.value)" [filter]="true" filterBy="displayName"
                        [optionLabel]="'displayName'" required placeholder="请选择">
                    </p-dropdown>
                    <validation-messages [formCtrl]="teamSelect"></validation-messages>
                </div>

                <p-table [value]="createInfo" [paginator]="false">
                    <ng-template pTemplate="header">
                        <tr>
                            <th style="width: 80px">序号</th>
                            <th style="width: 80px">操作</th>
                            <th>人员</th>
                            <th>技能</th>
                        </tr>
                    </ng-template>
                    <ng-template pTemplate="body" let-rowIndex="rowIndex" let-car="$implicit">
                        <tr>
                            <td style="width: 80px">{{rowIndex}}</td>
                            <td style="width: 80px"><i (click)="deleteTable(rowIndex)" class="pi pi-trash" style="font-size: 3em;cursor: pointer;color: #007ad9;"></i></td>
                            <td>
                                <p-dropdown displaySelectedLabel="'true'" name="{{'people'+rowIndex}}"
                                    (onChange)="peopleChange($event.value)" #peopleSelect="ngModel"
                                    [options]="car.peopleList" [(ngModel)]="car.skillDto.userId" dataKey="id"
                                    [optionLabel]="'name'" placeholder="请选择" required>
                                </p-dropdown>
                                <validation-messages [formCtrl]="peopleSelect"></validation-messages>
                            </td>
                            <td>


                                <p-multiSelect name="{{'skillId'+rowIndex}}" #skillIdSelect="ngModel"
                                    defaultLabel="请选择技能" [options]="car.jinengList" [(ngModel)]="car.skillDto.skillId"
                                    optionLabel="label" required>
                                </p-multiSelect>
                                <validation-messages class="absolute" [formCtrl]="skillIdSelect"></validation-messages>
                            </td>


                        </tr>
                    </ng-template>
                </p-table>

            </div>
            <div class="ui-g" *ngIf="dialogType=='修改'">
                <div class="ui-g-4">班组：<input type="text" name="organizationUnit" #organizationUnitInput="ngModel"
                        disabled [(ngModel)]="uiItem.organizationUnit"></div>
                <div class="ui-g-4">人员：<input type="text" name="user" #userInput="ngModel" disabled
                        [(ngModel)]="uiItem.user">
                </div>
                <div>技能：</div>
                <p-multiSelect name="skillId" #skillIdSelect="ngModel" defaultLabel="请选择技能" [options]="jinengList"
                    [(ngModel)]="uiItem.skillId" optionLabel="label" required>
                </p-multiSelect>
                <validation-messages class="absolute" [formCtrl]="skillIdSelect"></validation-messages>
            </div>
            <div class="modal-footer" *ngIf="dialogType=='修改'">
                <button pButton [disabled]="!bopForm.form.valid" type="button" label="保存"
                    (click)="updateStandardDesc()"></button>
            </div>
            <div class="modal-footer" *ngIf="dialogType=='新增'">
                <button pButton [disabled]="!bopForm.form.valid" type="button" label="保存"
                    (click)="addStandardDesc()"></button>
            </div>
        </form>
    </p-dialog>
    <!-- 履历弹窗 -->
    <p-dialog [style]="{width: '80%', height: '50%'}" header="操作履历" [(visible)]="llVisible" (onHide)="displayclose()"
        modal="modal" [responsive]="true">
        <p-table [value]="logList" [paginator]="false">
            <ng-template pTemplate="header">
                <tr>
                    <th style="width: 150px">序号</th>
                    <th style="width: 150px">操作时间</th>
                    <th style="width: 150px">操作类型</th>
                    <th style="width: 150px">操作人</th>
                    <th style="width: 150px">操作详情</th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-rowIndex="rowIndex" let-car>
                <tr>
                    <td style="width: 80px">{{rowIndex+1}}</td>
                    <td style="width: 150px">{{car.creationTime | date:'yyyy-MM-dd'}}</td>
                    <td style="width: 150px">{{car.operationTypeDesc}}</td>
                    <td style="width: 150px">{{car.userName}}</td>
                    <td style="width: 150px">{{car.businessTypeDesc}}</td>
                </tr>
            </ng-template>
        </p-table>


    </p-dialog>
</div>